import React, { useState, useEffect, useRef } from "react";
import { HollowShadowPieChart, HollowShadowRingGraph, HorizontalGradientBar } from "@/echarts";
import { XxpageContainer } from "@/ui";
import styles from "./styles/style.module.scss";


const EchartView = () => {


    const [list, setList] = useState([
        // {
        //     insuranceAmount: 0,//累计保险金额
        //     riskCode: 42,
        //     riskName: '测试参数1'
        // },
        // {
        //     insuranceAmount: 0,//累计保险金额
        //     riskCode: 23,
        //     riskName: '测试参数2'
        // },
        // {
        //     insuranceAmount: 0,//累计保险金额
        //     riskCode: 123,
        //     riskName: '测试参数3'
        // }
    ])



    return (
        <XxpageContainer>
            <div className={styles.page}>
                <div className="item">
                    <HorizontalGradientBar
                        style={{
                            width: 400,
                            height: 200
                        }}
                        filedsName={{
                            name: "year",
                            value: "amount"
                        }}
                        // list={[
                        //     {
                        //         amount: 123,
                        //         caseCount: 364,
                        //         year: 2020
                        //     },
                        //     {
                        //         amount: 64,
                        //         caseCount: 123,
                        //         year: 2021
                        //     },
                        //     {
                        //         amount: 238,
                        //         caseCount: 468,
                        //         year: 2022
                        //     },
                        //     {
                        //         amount: 342,
                        //         caseCount: 894,
                        //         year: 754
                        //     },
                        //     {
                        //         amount: 332,
                        //         caseCount: 443,
                        //         year: 2024
                        //     },
                        // ]}
                        list={list || []}

                    />
                    <div className="title">渐变柱状图表样式示例</div>
                </div>
                <div className="item" >
                    <HollowShadowRingGraph
                        style={{
                            width: 400,
                            height: 200
                        }}
                        title="累计保险金额占比（分险种）"
                        unit="万元"
                        list={
                            [
                                {
                                    insuranceAmount: 0,//累计保险金额
                                    riskCode: 42,
                                    riskName: '测试参数1'
                                },
                                {
                                    insuranceAmount: 0,//累计保险金额
                                    riskCode: 23,
                                    riskName: '测试参数2'
                                },
                                {
                                    insuranceAmount: 0,//累计保险金额
                                    riskCode: 123,
                                    riskName: '测试参数3'
                                }
                            ]
                        }
                        filedsName={{
                            name: "riskName",
                            value: "insuranceAmount"
                        }}
                    />
                    <div className="title">渐变柱状图表样式示例</div>
                </div>
                <div className="item" >
                    <HollowShadowPieChart
                        style={{
                            width: 400,
                            height: 200
                        }}
                        title="累计保险金额占比（分险种）"
                        unit="万元"
                        list={[
                            {
                                insuranceAmount: 0,//累计保险金额
                                riskCode: 42,
                                riskName: '测试参数1'
                            },
                            {
                                insuranceAmount: 0,//累计保险金额
                                riskCode: 23,
                                riskName: '测试参数2'
                            },
                            {
                                insuranceAmount: 0,//累计保险金额
                                riskCode: 123,
                                riskName: '测试参数3'
                            }
                        ]}
                        filedsName={{
                            name: "riskName",
                            value: "riskCode"
                        }}
                    />
                    <div className="title">渐变环形图</div>
                </div>

            </div>
        </XxpageContainer>
    )
}
export default EchartView;